<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/static/bingxingtu/css/progresscircle.css">
    <style>
        .circlechart {
		 	float: left;
			padding: 20px;
            width: 90px;
		}
         .search_input {
            width:100%;
            height:42px;
            padding-left:13px;
        }
        .search_button {
            height:42px;
            /*width:42px;*/
            cursor:pointer;
            position:absolute;
        }
        .bar input {
            border:3px solid #66defd;
            border-radius:5px;
            background:transparent;
            top:0;
            right:0;
        }
        .bar button {
            background-color: #66defd;;
            /*background: linear-gradient(to right, #be0063, #ffcbd4);*/
            border-radius:0 5px 5px 0;
            width:160px;
            top:0;
            right:0;
            color: white;
        }
        .bar button:before {
            font-size:13px;
            color:#a7eded;
        }
        button {
            border:none;
            outline:none;
        }
    </style>
</head>
<body>

{# 搜索功能⬇️ #}
<div class="search bar" style="position: absolute;top: 10px; left: 490px;width: -webkit-calc(100% - 980px)">
    <div id="search_button"   >
        <strong>
        <input class="search_input" id="search_input" placeholder="输入搜索关键词" name="keys" type="text" value="{{keys}}">
        </strong>
        <button class="search_button" id="search_submit"  onclick="search()" style="width: 100px"> <strong><font size="5">搜 索</font></strong> </button>
    </div>
</div>

<div id="search_result" style="display: none;z-index: 999;position: absolute;top: 80px;left: 15%;width: 70%;min-height: 200px;
            background:linear-gradient(to bottom,#b8eafd,#e8ffdb) ;opacity:0.8;padding: 5px;
            border-radius: 2px;box-shadow: 4px 4px 8px #bcbcbc">

</div>

<button id="search_close" onclick="search_close()" style="display: none;z-index: 999;position: absolute;
top: 80px;right: 15%;background-color: black;color: white;border-radius: 2px">close</button>


<script>
    function search() {
        //获取输入内容
        key = document.getElementById('search_input').value;
        // 清空搜索结果
        document.getElementById('search_result').innerHTML = '';
        // 判断是否继续进行
        if(key == '' || key == ' '){
            return
        }
        // 发送请求给后台
        $.get('/search/',{
            'key':key
        },function (ret) {
            // 把结果显示
            document.getElementById('search_close').style.display= 'block';

            var d = document.getElementById('search_result');
            d.style.display = 'block';
            results = ret.results; //ret.results是返回结果为列表
            for(var i=0;i<results.length;i++){
                var a =document.createElement('a');
                a.href = results[i].url;
                a.target = '__blank';
                a.innerText =  '【'+results[i].type+'】：'+results[i].text;
                d.appendChild(a);
                d.appendChild(document.createElement('br'))
            }
        })
    }
    function search_close() {
        document.getElementById('search_result').style.display= 'none';
        document.getElementById('search_close').style.display= 'none';

    }
</script>
{# 搜索功能⬆️ #}
<div  style="height: 400px;overflow-y: scroll;margin-left: 15px;width: 300px;" class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
    您的项目如下：
    {% for i in user_projects %}
         <div class="panel panel-default" >
            <div class="panel-heading" role="tab" id="heading{{ i.id }}">
                <h4 class="panel-title">
                    <a class="collapsed" style="text-decoration: none" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse{{ i.id }}" aria-expanded="false" aria-controls="collapse{{ i.id }}">
                        <span style="color: #01a2cb"> {{ i.name }} </span>
                    </a>
                </h4>
            </div>
            <div id="collapse{{ i.id }}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading{{ i.id }}">
                <div style="padding-left: 10px;font-size: xx-small">
                   备注： {{ i.remark }} <br>
                   其他管理员：{{ i.other_user }} <br>
                    <a href="/apis/{{ i.id }}/" style="background-color: #47ba04;color: white;font-size: large;border-radius: 5px">&nbsp;立即进入&nbsp;</a> &nbsp;
                    <a href="#" onclick="save_api('{{ i.id }}')" style="background-color: #e92f6c;color: white;font-size: large;border-radius: 5px">&nbsp;保存请求&nbsp;</a> <br>
                    <br>
                </div>
            </div>
        </div>
    {% endfor %}
</div>

<script>
    function save_api(id) {
        // 获取接口的所有数据
        var ts_method = document.getElementById('ts_method').value ;
        var ts_url = document.getElementById('ts_url').value ;
        var ts_host = document.getElementById('ts_host').value ;
        var ts_header = document.getElementById('ts_header').value ;
         // 判断顶部的数据是否填充完
        if(ts_method == 'none'){alert('请选择请求方式！');return}
        if(ts_url == ''){alert('请输入url！');return}
        if(ts_host == ''){alert('请输入host！');return}
         //判断关键数据是否符合规则
        if(ts_host.slice(0,7) != 'http://' && ts_host.slice(0,8) != 'https://'){
            alert('host必须以http://或https://开头！');return
        }
        if(ts_header != ''){
            try {
                JSON.parse(ts_header)
            }catch (e) {
                alert('header请求头不符合json规范！');
                return
            }
        }
        var ts_body_method = $('ul#myTab li[class="active"]')[0].innerText;
        if(ts_body_method == 'none'){
            var ts_api_body = ''
        }
        if(ts_body_method == 'form-data'){
            var ts_api_body = []; //新建这个空列表用来存放后续的数据
            var tbody_ = $("table#mytable tbody")[0]; //获取该表格的内容部分
            var trlist = tbody_.children ; //获取下面所有tr，每个tr就是一个键值对实际上
            for(var i=0;i<trlist.length;i++) {
                var tdarr = trlist[i].children; // 获取tr下的俩个td
                var key = tdarr[0].innerText; // 获取key
                var value = tdarr[1].innerText; // 获取value
                ts_api_body.push([key, value]);// 作为一个数组，存放到这个大数组里。
            }
            ts_api_body = JSON.stringify(ts_api_body);
        }
        if(ts_body_method == 'x-www-form-urlencoded'){
            var ts_api_body = []; //新建这个空列表用来存放后续的数据
            var tbody_ = $("table#mytable2 tbody")[0]; //获取该表格的内容部分
            var trlist = tbody_.children ; //获取下面所有tr，每个tr就是一个键值对实际上
            for(var i=0;i<trlist.length;i++) {
                var tdarr = trlist[i].children; // 获取tr下的俩个td
                var key = tdarr[0].innerText; // 获取key
                var value = tdarr[1].innerText; // 获取value
                ts_api_body.push([key, value]);// 作为一个数组，存放到这个大数组里。
            }
            ts_api_body = JSON.stringify(ts_api_body);
        }
        if(ts_body_method == 'Text'){
            var ts_api_body = document.getElementById('raw_Text').value;
        }
        if(ts_body_method == 'JavaScript'){
            var ts_api_body = document.getElementById('raw_JavaScript').value;
        }
        if(ts_body_method == 'Json'){
            var ts_api_body = document.getElementById('raw_Json').value;
        }
        if(ts_body_method == 'Html'){
            var ts_api_body = document.getElementById('raw_Html').value;
        }
        if(ts_body_method == 'Xml'){
            var ts_api_body = document.getElementById('raw_Xml').value;
        }

        if(ts_body_method == 'GraphQL'){
            body_plan_G_Q = document.getElementById('body_plan_G_Q').value;
            body_plan_G_G = document.getElementById('body_plan_G_G').value;
             var ts_api_body = body_plan_G_Q+ '*WQRF*' + body_plan_G_G
        }
         // 发送请求给后台
         $.get('/Home_save_api/',{
             'project_id':id,
            'ts_method':ts_method,
            'ts_url':ts_url,
            'ts_host':ts_host,
            'ts_header':ts_header,
            'ts_body_method':ts_body_method,
            'ts_api_body':ts_api_body,
        },function (ret) {
            alert('保存成功！')
        })


    }
</script>

<div id="home_log_plan" style="padding-left: 20px;overflow-y: scroll;width: 320px;position: absolute;bottom: 10px">
    <br>
    {% for i in home_log %}
        <div style="background-color: #eefaff;margin-bottom: 3px;border-radius: 5px;padding: 1px">
        <a href="/home_log/{{ i.id }}/" style=";text-decoration: none"  class="log" >
            <span style="font-size: large;;color: black">{{ i.api_method }}</span>
            {{ i.api_host }}{{ i.api_url }}
        </a>
        </div>
    {% endfor %}
</div>


<div style="position: absolute;top: 100px;left: 380px;width: -webkit-calc(100% - 390px);">

        <ul class="nav navbar-nav" style="width: 98%">
            <li>
                <select id="ts_method" style="height: 40px;" class="form-control">
                    <option value="none"> 请求方式</option>
                    <option value="post" > POST</option>
                    <option value="get" > GET</option>
                    <option value="put" > PUT</option>
                    <option value="delete"> DELETE</option>
                </select>
            </li>

            <li style="width: -webkit-calc(100% - 225px)">
                <input id="ts_url" style="color: black;padding-left: 10px;width: 100%;height: 40px;" type="text" placeholder='url: 如 /abcd/efgh/' value="{{ log.api_url }}">
            </li>

            <li >
                <button onclick="ts_send()" type="button"
                        style="height: 40px;width: 120px;"
                        class="btn btn-default"><span style="font-size: large">Send</span></button>
            </li>
        </ul>
        <br><br><br>
        <ul class="nav navbar-nav" style="width: 98%">
            <li style=" width: -webkit-calc(100% - 63px)">

                <datalist id="datalist_1">
                    {% for i in hosts %}
                        <option id="host_{{ i.id }}" value="{{ i.host }}">{{ i.host }}</option>
                    {% endfor %}
                </datalist>
                 <input list="datalist_1" autocomplete="off"  id="ts_host"  style="color: black;padding-left: 10px;width: 100%;height: 40px;" type="text" placeholder='host: 如http(s)://xxxx.ccc.com' value="{{ log.api_host }}">
            </li>
             <li >
                <button type="button"
                        style="height: 40px;width: 60px;"
                        class="btn btn-default"><span>Clear</span></button>
            </li>
        </ul>
        <br><br><br>
        <ul class="nav navbar-nav" style="width: 98%">
            <li style="width:  -webkit-calc(100% - 63px)">
                 <input id="ts_header"  style="color: black;padding-left: 10px;width: 100%;height: 40px;" type="text"
                       placeholder='header请求头：如{"Content":"application/json"}' value="{{ log.api_header }}">
            </li>
             <li >
                <button type="button"
                        style="height: 40px;width: 60px;"
                        class="btn btn-default"><span>Clear</span></button>
            </li>
        </ul>
        <br><br><br>
        <ul id="myTab" class="nav nav-tabs" >
            <li class="active"><a id="click_none" href="#none" data-toggle="tab" >none</a></li>
            <li ><a href="#form-data" data-toggle="tab" >form-data</a></li>
            <li ><a href="#x-www-form-urlencoded" data-toggle="tab" >x-www-form-urlencoded</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">raw <b class="caret"></b></a>
                <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
                    <li><a href="#Text" tabindex="-1" data-toggle="tab">Text</a></li>
                    <li><a href="#JavaScript" tabindex="-1" data-toggle="tab">JavaScript</a></li>
                    <li><a href="#Json" tabindex="-1" data-toggle="tab">Json</a></li>
                    <li><a href="#Html" tabindex="-1" data-toggle="tab">Html</a></li>
                    <li><a href="#Xml" tabindex="-1" data-toggle="tab">Xml</a></li>
                </ul>
            </li>

            <li ><a href="#GraphQL" data-toggle="tab" >GraphQL</a> </li>

            <li ><a href="#response" data-toggle="tab" >返回体</a></li>
        </ul>
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade in active" id="none" style="text-align: center;color: grey">
                <h3>这个请求将不会携带任何请求体</h3>
                <h5>This request will not carry any request-body</h5>
            </div>
            <div class="tab-pane fade" id="form-data">
                <div class="table-responsive" style="width: 98%;color: black">
                    <table class="table table-bordered table-striped" id="mytable" style="background-color:white">
                        <thead style="color: #337ab7;font-size: x-small">
                          <tr>
                            <td style="width: 30%">Key</td>
                            <td style="width: 50%">Value</td>
                          </tr>
                        </thead>
                        <tbody id="mytbody">
                          <tr>
                            <td></td>
                            <td></td>
                          </tr>
                        </tbody>
                    </table>
                </div>
                <button class="btn btn-default" id="add"><i class="fa fa-plus"></i> 添加新参数</button>
                <script>window.jQuery || document.write('<script src="/static/201801271505/js/jquery-1.11.0.min.js"><\/script>')</script>
                <script type="text/javascript" src="/static/201801271505/js/bootstable.js"></script>
            </div>
            <div class="tab-pane fade" id="x-www-form-urlencoded">
                <div class="table-responsive" style="width: 98%;color: black">
                    <table class="table table-bordered table-striped" id="mytable2" style="background-color:white">
                        <thead style="color: #337ab7;font-size: x-small">
                          <tr>
                            <td style="width: 30%">Key</td>
                            <td style="width: 50%">Value</td>
                          </tr>
                        </thead>
                        <tbody id="mytbody2">
                          <tr>
                            <td></td>
                            <td></td>
                          </tr>
                        </tbody>
                    </table>
                </div>
                <button class="btn btn-default" id="add2"><i class="fa fa-plus"></i> 添加新参数</button>
                <script>window.jQuery || document.write('<script src="/static/201801271505/js/jquery-1.11.0.min.js"><\/script>')</script>
                <script type="text/javascript" src="/static/201801271505/js/bootstable.js"></script>
            </div>
            <div class="tab-pane fade" id="Text">
                <textarea name="" id="raw_Text" style="color: black;width: 98%;height: 300px"></textarea>
            </div>
            <div class="tab-pane fade" id="JavaScript">
                <textarea name="" id="raw_JavaScript" style="color: black;width: 98%;height: 300px"></textarea>
            </div>
            <div class="tab-pane fade" id="Json">
                <textarea name="" id="raw_Json" style="color: black;width: 98%;height: 300px"></textarea>
            </div>
            <div class="tab-pane fade" id="Html">
                <textarea name="" id="raw_Html" style="color: black;width: 98%;height: 300px"></textarea>
            </div>
            <div class="tab-pane fade" id="Xml">
                <textarea name="" id="raw_Xml" style="color: black;width: 98%;height: 300px"></textarea>
            </div>

            <div class="tab-pane fade" id="GraphQL">
                 <table style="width: 98%">
                   <thead>
                        <tr>
                            <td style="width: 55%"><span >QUERY</span></td>
                            <td style="width: 40%"><span >GRAPHQL VARIABLES</span></td>
                          </tr>
                   </thead>
                    <tbody>
                      <tr>
                        <td><textarea id="body_plan_G_Q"  rows="14" style="padding-left: 3px;border-radius: 5px;width: 99%"></textarea></td>
                        <td><textarea id="body_plan_G_G"  rows="14" style="padding-left: 3px;border-radius: 5px;width: 100%"></textarea></td>
                      </tr>
                    </tbody>
                </table>
            </div>

            <div class="tab-pane fade" id="response">
                <textarea name="" id="ts_response_body" disabled="disabled" style="background-color: #e4f3f5;color: black;width: 98%;height: 300px"></textarea>
            </div>
        </div>
        <br>

    <script>
        // 自动设置请求类型
        if( "{{ log.api_method }}" != ''){
            document.getElementById('ts_method').value = "{{ log.api_method }}";
        }
        //请求体类型 //请求体
        if("{{ log.body_method }}" != ''){

            var body_method = '#'+"{{ log.body_method }}";
            $("li a[href="+body_method+"]").click();

            if("{{ log.body_method }}" == 'Text'){
                document.getElementById('raw_Text').value = "{{ log.api_body }}";
            }
            if("{{ log.body_method }}" == 'JavaScript'){
                document.getElementById('raw_JavaScript').value = "{{ log.api_body }}";
            }
            if("{{ log.body_method }}" == 'Json'){
                document.getElementById('raw_Json').value = "{{ log.api_body }}";
            }
            if("{{ log.body_method }}" == 'Html'){
                document.getElementById('raw_Html').value = "{{ log.api_body }}";
            }
            if("{{ log.body_method }}" == 'Xml'){
                document.getElementById('raw_Xml').value = "{{ log.api_body }}";
            }
            if("{{ log.body_method }}" == 'form-data'){
                var tbody = document.getElementById('mytbody'); //

                body = eval("{{ log.api_body }}".replace(new RegExp('&quot;',"gm"),'"')); //把这个像列表的字符串请求体变成真正的列表
                for(var i=0;i<body.length;i++){ // 遍历这个请求体列表
                    key = body[i][0]; //拿出每一个键值对的key
                    value = body[i][1];//拿出每一个键值对的value
                    var childs_tr = tbody.children ;//获取到这个表格下面所有的tr组成的大列表
                    // 每个tr下的children得到的是 td列表，只有俩个。
                    childs_tr[i].children[0].innerText = key; //第一个td放key
                    childs_tr[i].children[1].innerText = value;//第二个td放value
                    //判断是否是最后一次遍历，来决定是否点击新增参数按钮
                    if(i<body.length-1){
                        document.getElementById('add').click()
                    }
                }
            }
            if("{{ log.body_method }}" == 'x-www-form-urlencoded'){
                var tbody = document.getElementById('mytbody2'); // 定位表格中的tbody部分
                body = eval("{{ log.api_body }}".replace(new RegExp('&quot;',"gm"),'"')); //把这个像列表的字符串请求体变成真正的列表
                for(var i=0;i<body.length;i++){ // 遍历这个请求体列表
                    key = body[i][0]; //拿出每一个键值对的key
                    value = body[i][1];//拿出每一个键值对的value
                    var childs_tr = tbody.children ;//获取到这个表格下面所有的tr组成的大列表
                    // 每个tr下的children得到的是 td列表，只有俩个。
                    childs_tr[i].children[0].innerText = key; //第一个td放key
                    childs_tr[i].children[1].innerText = value;//第二个td放value
                    //判断是否是最后一次遍历，来决定是否点击新增参数按钮
                    if(i<body.length-1){
                        document.getElementById('add2').click()
                    }
                }
            }
            if("{{ log.body_method }}" == 'GraphQL'){
                body_plan_G_Q =  "{{ log.api_body }}".split('*WQRF*')[0];
                body_plan_G_G = "{{ log.api_body }}".split('*WQRF*')[1];
                document.getElementById('body_plan_G_Q').value =body_plan_G_Q;
                document.getElementById('body_plan_G_G').value = body_plan_G_G;
            }
        }
    </script>

    <script>
        $('#mytable').SetEditable({
                $addButton: $('#add'),
            });
        $('#mytable2').SetEditable({
                $addButton: $('#add2'),
            });
        function ts_send() {
            // 获取接口的所有数据
            var ts_method = document.getElementById('ts_method').value ;
            var ts_url = document.getElementById('ts_url').value ;
            var ts_host = document.getElementById('ts_host').value ;
            var ts_header = document.getElementById('ts_header').value ;
             // 判断顶部的数据是否填充完
            if(ts_method == 'none'){alert('请选择请求方式！');return}
            if(ts_url == ''){alert('请输入url！');return}
            if(ts_host == ''){alert('请输入host！');return}
             //判断关键数据是否符合规则
            if(ts_host.slice(0,7) != 'http://' && ts_host.slice(0,8) != 'https://'){
                alert('host必须以http://或https://开头！');return
            }
            if(ts_header != ''){
                try {
                    JSON.parse(ts_header)
                }catch (e) {
                    alert('header请求头不符合json规范！');
                    return
                }
            }
            var ts_body_method = $('ul#myTab li[class="active"]')[0].innerText;
            if(ts_body_method == 'none'){
                var ts_api_body = ''
            }
            if(ts_body_method == 'form-data'){
                var ts_api_body = []; //新建这个空列表用来存放后续的数据
                var tbody_ = $("table#mytable tbody")[0]; //获取该表格的内容部分
                var trlist = tbody_.children ; //获取下面所有tr，每个tr就是一个键值对实际上
                for(var i=0;i<trlist.length;i++) {
                    var tdarr = trlist[i].children; // 获取tr下的俩个td
                    var key = tdarr[0].innerText; // 获取key
                    var value = tdarr[1].innerText; // 获取value
                    ts_api_body.push([key, value]);// 作为一个数组，存放到这个大数组里。
                }
                ts_api_body = JSON.stringify(ts_api_body);
            }
            if(ts_body_method == 'x-www-form-urlencoded'){
                var ts_api_body = []; //新建这个空列表用来存放后续的数据
                var tbody_ = $("table#mytable2 tbody")[0]; //获取该表格的内容部分
                var trlist = tbody_.children ; //获取下面所有tr，每个tr就是一个键值对实际上
                for(var i=0;i<trlist.length;i++) {
                    var tdarr = trlist[i].children; // 获取tr下的俩个td
                    var key = tdarr[0].innerText; // 获取key
                    var value = tdarr[1].innerText; // 获取value
                    ts_api_body.push([key, value]);// 作为一个数组，存放到这个大数组里。
                }
                ts_api_body = JSON.stringify(ts_api_body);
            }
            if(ts_body_method == 'Text'){
                var ts_api_body = document.getElementById('raw_Text').value;
            }
            if(ts_body_method == 'JavaScript'){
                var ts_api_body = document.getElementById('raw_JavaScript').value;
            }
            if(ts_body_method == 'Json'){
                var ts_api_body = document.getElementById('raw_Json').value;
            }
            if(ts_body_method == 'Html'){
                var ts_api_body = document.getElementById('raw_Html').value;
            }
            if(ts_body_method == 'Xml'){
                var ts_api_body = document.getElementById('raw_Xml').value;
            }

            if(ts_body_method == 'GraphQL'){
                body_plan_G_Q = document.getElementById('body_plan_G_Q').value;
                body_plan_G_G = document.getElementById('body_plan_G_G').value;
                 var ts_api_body = body_plan_G_Q+ '*WQRF*' + body_plan_G_G
            }

            // 发送请求给后台
             $.get('/Api_send_home/',{
                'ts_method':ts_method,
                'ts_url':ts_url,
                'ts_host':ts_host,
                'ts_header':ts_header,
                'ts_body_method':ts_body_method,
                'ts_api_body':ts_api_body,
            },function (ret) {
                 log_refersh();
                $("li a[href=#response]").click(); //点击一下返回体按钮
                document.getElementById('ts_response_body').value = ret ;//把返回值显示到返回值多行文本框中
            })
        }
        // 左侧记录刷新
        function log_refersh() {
            //清空
            div = document.getElementById('home_log_plan');
            div.innerHTML = '';
            // 生成新的
            $.get('/get_home_log/',{
            },function (ret) { //ret 应该就是我们获取到的记录列表数组 的字符串形式
                // 这里写生成展示的代码
                console.log(ret);
                var res = eval(ret);
                var all_logs = res.all_logs;
                for(var i=0; i<all_logs.length;i++){
                    var a =document.createElement('a') ;//创建a标签
                    a.href="/home_log/"+all_logs[i].id+"/" ; // 点击函数
                    a.style="text-decoration: none" ;
                    a.class = 'log';
                    var s = document.createElement('span'); //声明显示请求体类型的span
                    s.style = "font-size: large;color: black";
                    s.innerText = all_logs[i].api_method+' - '; //设定这个method;
                    var s2 = document.createElement('span'); // 声明存放host+url的span
                    s2.innerText = all_logs[i].api_host+all_logs[i].api_url;
                    a.appendChild(s);
                    a.appendChild(s2);
                    div.appendChild(a);
                    div.appendChild(document.createElement('br'));
                }
            })
        }
    </script>
</div>

<div id="shu" style="width: 2px;background-color: #e0ddde;position: absolute;top: 70px;left:340px;">&nbsp;
</div>

<div id="heng" style="width: 310px;height: 1px;background-color: #e0ddde;position: absolute;left:15px ;bottom: 310px">&nbsp;
</div>

<script>
    var h = document.documentElement.clientHeight;
    document.getElementById('shu').style.height = (h-85).toString() +'px';
    document.getElementById('home_log_plan').style.maxHeight ="300px";
</script>
<script>
    document.getElementById('menu_btn').click();
</script>


<div style="background-color: #eefaff;min-height: 100px;width:-webkit-calc(100% - 340px);
            margin-left: 342px;position: fixed;bottom: 0px;box-shadow: -4px -4px 8px #e3e3e3;padding: 10px">
    <div style="width: 120px;height: 80px;background-color: #105f72;border-radius: 5px;color: white;padding: 3px;font-size: small">
        当前项目数: <span>{{ count_project }}</span> <br>
        当前接口数: <span>{{ count_api }}</span> <br>
        当前用例数: <span>{{ count_case }}</span> <br>
        当前报告数: <span>{{ count_report }}</span>
    </div>

    <div style="position: fixed;bottom: 3px;left: 470px;">
      <div class="circlechart" data-percentage="{{ ziyuan }}"></div>
      <div class="circlechart" data-percentage="30"></div>
      <div class="circlechart" data-percentage="85"></div>
        <span style="position: fixed;bottom: 5px;left: 500px;font-size: xx-small;color: #105f72">资源比</span>
        <span style="position: fixed;bottom: 5px;left: 688px;font-size: xx-small;color: #105f72">待定</span>
        <span style="position: fixed;bottom: 5px;left: 598px;font-size: xx-small;color: #105f72">待定</span>
    </div>


</div>

<script src="/static/bingxingtu/js/progresscircle.js"></script>
<script>
    $('.circlechart').circlechart(); // Initialization
</script>


</body>
</html>
